<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Home</title>
<link href="../../static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../static/css/iotxstyle.css" rel="stylesheet" type="text/css" media="all" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="../../static/js/jquery-2.0.3.min.js"></script>
<script src="../../static/js/responsiveslides.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="../../static/js/move-top.js"></script>
<script type="text/javascript" src="../../static/js/easing.js"></script>
<script src="../../static/js/bootstrap.js"></script>
<script src="../../static/js/jquery.progress.js"></script>
<style>
	.nav > li {
		position: relative;
		display: block;
		margin-left: 1%;
		border: 0px;
	}
	.form-control{
		margin-top:10%;width: 120%;height: 80%;font-size: 18px
	}
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
		color: #262626;
		text-decoration: none;
		background-color: #f5f5f5;
	}
	div.bg_con{
		float: right;
		margin-right: 38%;
		width: 3.7%;
		height: 50%;
	}
	div.bg_con input.theHelper{
		display:none;
	}
	div.bg_con label{
		position:relative;
		display: block;
		padding: 1px;
		border-radius: 24px;
		height: 22px;
		background-color: #eee;
		cursor: pointer;
		vertical-align: top;
		-webkit-user-select: none;
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:before{
		content: '';
		display: block;
		border-radius: 24px;
		height: 22px;
		background-color: #9BB1BA;
		-webkit-transform: scale(1, 1);
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		margin-left: -11px;
		display: block;
		border-radius: 100%;
		background-color: white;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
		-webkit-transform: translateX(-9px);
		-webkit-transition: all 0.3s ease;
	}
	input.theHelper:checked~label:after{
		-webkit-transform: translateX(9px);
	}
	input.theHelper:checked~label:before{
		background-color:#398FD0;
	}
	.demo--radioInput {

		background-color: #fff;
		border: 1px solid rgba(0,0,0,0.15);
		border-radius: 100%;
		display: inline-block;
		height: 16px;
		margin-right: 10px;
		margin-top: 0px;
		vertical-align: middle;
		width: 16px;
		line-height: 1;

	}
	@-webkit-keyframes rotation{
		from {-webkit-transform: rotate(0deg);}
		to {-webkit-transform: rotate(360deg);}
	}

	.loading-img{
		-webkit-transform: rotate(360deg);
		animation: rotation 3s linear infinite;
		-moz-animation: rotation 3s linear infinite;
		-webkit-animation: rotation 3s linear infinite;
		-o-animation: rotation 3s linear infinite;
	}
</style>
</head>
<body>
<!--navbar -->
<div class="all-navbar" style="height:500px;padding-top:2%;background-image: url('../../static/img/index-top-img.png')"> <!--style="height:380px;background-image: url('img/topo-guide.png')"-->
	<nav class="navbar navbar-default">
		<div style="float: left;padding-left: 2%">
			<img src="../../static/img/logo-w.png" style="width: 260px;height: 100%">
		</div>
		<ul class="nav navbar-nav" style="float: left;width: 80%">
			<li >
				<a href="#" id="system">System <span class="sr-only"></span></a>
			</li>
			<li class="active"><a href="#" id="network">Network</a></li>
			<li><a href="#" id="sensors">Sensors</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Files<span class="caret"></span>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#" id="datafile">Data  File</a></li>
					<li><a href="#" id="settingfile">Setting  File</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools<span class="caret"></span>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#" id="datarecovery">Data  Recovery</a></li>
					<li><a href="#" id="settingguide">Setup Wizard</a></li>
				</ul>
			</li>
			<li><a href="#" id="logout">Logout</a></li>
			<li>
				<button class="apply-button" style="margin-left: 40%">
					Apply&Save
				</button>
			</li>
			<li>
				<button class="apply-button">
					Upload
				</button>
			</li>
		</ul>
	</nav>
	<div class="index-introduction-title">
		IOTX-Master  System
	</div>
	<div class="index-introduction-bottom">
		<div class="index-introduction-iotxbox">
			IOTX  BOX
		</div>
		<div class="index-introduction-dusts">
			DUSTS
		</div>
		<div class="index-introduction-sensors">
			SENSORS
		</div>
	</div>
</div>
<!--navbar -->
	<section>
		<div class="top-second">

			<div class="user-information" id="user-information">
				Could
			</div>
			<div class="system-information" id="system-information">
				Local Network
			</div>
			<div class="system-info-line">
				<div class="system-info-line1">

				</div>
				<div class="system-info-line2">

				</div>
			</div>

		</div>
		<div class="systemInfo">
			<div class="systemInfo-in">
			<div class="system-title" >
				>  Network  Settings
			</div>
			<div class="user-title">
				<div class="user-title-info">
				Cloud
				</div>
			</div>
			<div class="select-network">
				<!--<div class="btn-group dropdown"style="margin-top: 2%;margin-left: 1%;">
					<button class="btn  btn-default dropdown-toggle" data-toggle="dropdown">
						IP
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu context">

						<li>
							<a href="#">DNS</a>
						</li>
						<li>
							<a href="#">Port</a>
						</li>

					</ul>
				</div>-->
				<div class="select-network1">
					<div class="radioup" style="padding-left: 2%;">
						<label class="demo--label" style="float: left">
							<input id="ipRadio" checked="checked" class="demo--radio" type="radio" name="demo-radio">
							<span class="demo--radioInput"></span>
						</label>
						<h5 style="margin-top: 11%;font-size: 18px">IP</h5>
					</div>
					<div class="select-network-input" >
						<div class="select-network-input1">
							<input class="form-control" id="ipAddress0"  placeholder="192" value="" maxlength="3" size="3" />
						</div>
						<div class="select-network-input1">
							<input class="form-control" id="ipAddress1"  placeholder="168" value="" maxlength="3" size="3" />
						</div>
						<div class="select-network-input1">
							<input class="form-control" id="ipAddress2"  placeholder="1" value=""  maxlength="3" size="3" />
						</div>
						<div class="select-network-input1">
							<input class="form-control"  id="ipAddress3"  placeholder="1" value="" maxlength="3" size="3" />
						</div>
                        <div class="select-network-input1">
                            <input class="form-control"  id="ipPort"  placeholder="80" maxlength="3" size="3" />
                        </div>

					</div>
				</div>
				<div class="select-network2">
					<div class="radioup" style="padding-left: 2%">
						<label class="demo--label" style="float: left">
							<input  id="domainRadio"  class="demo--radio" type="radio" name="demo-radio">
							<span class="demo--radioInput"></span>
						</label>
						<h5 style="margin-top: 11%;font-size: 18px">Domain</h5>
					</div>
					<div class="select-network-input" >
                        <div class="select-network-input1">
							<input class="form-control" id="domainAddress" value="" style="width: 140%;"  placeholder="www.baidu.com"/>
						</div>
						<div class="select-network-input1" style="margin-left: 8%">
							<input class="form-control" id="domainPort" value=""  placeholder="80" maxlength="4" size="4" style="width: 140%;">
						</div>

					</div>
				</div>

			</div>
				<div class="user-title" style="margin-top: 5%">
					<div class="user-title-info">
						Local  Network
					</div>
				</div>
			<div class="wlan-title">
				<div class="wlan-title1">
					Wlan
					<div class="bg_con">
						<input id="checked_1" type="checkbox" name="checked_1" class="theHelper" />
						<label for="checked_1"></label>
					</div>
				</div>
				<div class="wlan-title2" id="scanDiv" style="display: none;">
					<div class="avail-wlan-title">
						Available  WLAN  List
					</div>
					<div class="avail-wlan-button">
						<button class="avail-wlan-finding" id="wifiScan">
							<img id="loading-img" class="loading-img" src="../../static/img/等待.png" style="margin-right: 12%">Search for WLAN . . .
						</button>
					</div>
				</div>
			</div>
                <div id="wifiList"  style="width: 100%;height: 100%;display: none;">
			<div class="wifi-list1">
				<div class="wifi-small-img">
					<img src="../../static/img/wifismallimg.png">
				</div>
				<div class="wifi-list-td">
					<div class="wifi-list-text">
						TP-LINK-001
					</div>
					<div class="wifi-list-detail">
						Connected  (Normal Quality)
					</div>
				</div>
				<button class="small-connect">
					connect
				</button>
			</div>
			<div class="password-text1">
				<div class="password-title">
					Password
				</div>
				<div class="password-input">
				<input type="password" class="form-control" style="margin-top: 3%;width: 160%;height: 65%">
				</div>
			</div>
			<div class="wifi-list2">
				<div class="wifi-small-img">
					<img src="../../static/img/wifismallimg.png">
				</div>
				<div class="wifi-list-td">
					<div class="wifi-list-text">
						TP-LINK-002
					</div>
					<div class="wifi-list-detail">
						Connected  (Normal Quality)
					</div>
				</div>
				<button class="small-connect">
					connect
				</button>
			</div>
			<div class="password-text2">
				<div class="password-title">
					Password
				</div>
				<div class="password-input">
					<input type="password" class="form-control" style="margin-top: 3%;width: 160%;height: 65%">
				</div>
			</div>
			<div class="wifi-list3">
				<div class="wifi-small-img">
					<img src="../../static/img/wifismallimg.png">
				</div>
				<div class="wifi-list-td">
					<div class="wifi-list-text">
						TP-LINK-003
					</div>
					<div class="wifi-list-detail">
						Connected  (Normal Quality)
					</div>
				</div>
				<button class="small-connect">
					connect
				</button>
			</div>
			<div class="password-text3">
				<div class="password-title">
					Password
				</div>
				<div class="password-input">
					<input type="password" class="form-control" style="margin-top: 3%;width: 160%;height: 65%">
				</div>
			</div>
                </div>
			<div class="wlan-title">
				<div class="wlan-title1">
					Mbbile  Data
					<div class="bg_con">
						<input id="checked_2" type="checkbox" name="checked_1" class="theHelper" />
						<label for="checked_2"></label>
					</div>
			</div>

            <div id="wlanDiv" style="width: 100%;height: 100%;display: none;">

            <div class="wlan-title1" style="padding-left:4%;font-size:18px;height: 40%;border-top: solid #ababab 1px;padding-top: 1%">
                Access  Point  Names
                <div class="bg_con" >
                    CMNET
                </div>
            </div>

			<div class="connectdetail" style="margin-top:0.8%;float: left;width:100%;height: 40%;border-top: solid #ababab 1px;">

				<div class="connecttitle" style="color:#556884;font-weight:300;padding-top: 1%;padding-left: 4%">
					Network Type
					<label class="demo--label" style="font-weight:300;margin-right: 36.5%;margin-top: 0.3%">
						<input class="demo--radio" type="radio" name="demo-radio">
						<span class="demo--radioInput"></span>Auto
					</label>

				</div>

				<div class="connecttitle" style="color:#556884;">
					<label class="demo--label" style="font-weight:300;margin-top: -2%;margin-right: 28%">
						<input class="demo--radio" type="radio" name="demo-radio">
						<span class="demo--radioInput"></span>4G/3G/2G auto
					</label>
				</div>

				<div class="connecttitle" style="color:#556884;">
					<label class="demo--label" style="font-weight:300;margin-top: -2%;margin-right: 35%">
						<input class="demo--radio" type="radio" name="demo-radio">
						<span class="demo--radioInput"></span>GPRS
					</label>
				</div>

				<div class="connecttitle" style="color:#556884;">
					<label class="demo--label" style="font-weight:300;margin-top: -2%;margin-right: 33.3%">
						<input class="demo--radio" type="radio" name="demo-radio">
						<span class="demo--radioInput"></span>NB-IOT
					</label>
				</div>

            </div>

			</div>
		</div>
		</div>
        </div>
		<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 1;"> </span></a>
	    <input type="hidden" id="server_name" value="{{ data['server']['server_name'] }}" />
        <input type="hidden" id="ip_port" value="{{ data['server']['ip_port'] }}" />
    </section>

<script>
    var server_name = $("#server_name").val();
    var ip_port = $("#ip_port").val();
    var server_array = server_name.split(".");
    //重新扫描附近wifi列表
    if(server_array.length==4){
        $("#ipRadio").attr("checked","checked");
        $("#ipAddress0").val(server_array[0]);
        $("#ipAddress1").val(server_array[1]);
        $("#ipAddress2").val(server_array[2]);
        $("#ipAddress3").val(server_array[3]);
        $("#ipPort").val(ip_port)
    }else{
        $("#domainRadio").attr("checked","checked");
        $("#domainAddress").val(server_name);
        $("#domainPort").val(ip_port);
    }

    //设置新的wifi
    var connectWifi = function (wifiName,pwd) {
        if(!wifiName || !pwd){
            alert("Please input the password!");
            return;
        }
        var post_data = {
            "name":wifiName,
            "pwd":pwd
        };
        $.ajax({
              type: 'POST',
              url: '/network/wifiConnect',
              data: JSON.stringify(post_data),
              contentType:'application/json',
              dataType: 'JSON',
              success: function(result){
                  alert(result.data);
                  }
               });

    };

    var scanWifiList = function () {
        $("#wifiList").empty();
        $.ajax({
              type: 'GET',
              url: '/network/wifiList',
              contentType:'application/json',
              dataType: 'JSON',
              success: function(data){
                  if(data && data.length>0){
                      for(var i=0;i<data.length;i++){
                          var html_='<div class="wifi-list" id="wifiName_"+'+data[i]+'>';
                          html_+='<div class="wifi-small-img"><img src="../../static/img/wifismallimg.png"></div>';
                          html_+='<div class="wifi-list-td">';
                          html_+='<div class="wifi-list-text">'+data[i]+'</div>';
                          html_+='<div class="wifi-list-detail">Connected  (Normal Quality)</div>';
                          html_+='</div>';
                          html_+='<button class="small-connect" id="connect_"+'+data[i]+'>'+"CONNECT"+'</button>';
                          html_+='</div>';
                          html_+='<div class="password-text" id="wifiPwd_"+'+data[i]+'>';
                          html_+='<div class="password-title">Password</div>';
                          html_+='<div class="password-input">';
                          html_+='<input type="password" class="form-control" style="margin-top: 3%;width: 160%;height: 65%" />';
                          html_+='</div>';
                          html_+='</div>';
                          $("#wifiList").append(html_);
                      }
                  }
                   //wifi item 点击事件
                    $("#wifiList .wifi-list").click(function () {
                        $(this).next().toggle();
                    });
                  //连接按钮触发事件
                  $(".small-connect").click(function (e) {
                      var name = $(this).parent().find(".wifi-list-text").text();
                      var pwd = $(this).parents("div").find('input[type="password"]').val();
                      connectWifi(name, pwd);
                      e.stopPropagation();
                  });
              }
        });
    };



    $(document).ready(function(){
        scanWifiList();

        //重新扫描附近wifi
        $("#wifiScan").click(function () {
            scanWifiList();
        });
        //wifi 区域显示
        $("#checked_1").click(function () {
            if($(this).prop("checked")){
                $("#wifiList").show();
                $("#scanDiv").show();
            }else{
                $("#wifiList").hide();
                $("#scanDiv").hide();
            }
        });
        //wlan 模块 区域显示
        $("#checked_2").click(function () {
            if($(this).prop("checked")){
                $("#wlanDiv").show();
            }else{
                $("#wlanDiv").hide();
            }
        });


        $('#system').click(function(){
            window.location.href='/sys/index';
        });
        $("#network").click(function () {
            window.location.href='/network/network';
        });
        $('#sensors').click(function(){
            window.location.href='/sys/index';
        });
        $('#datafile').click(function(){
            window.location.href='../data/datafile.html';
        });
        $('#settingfile').click(function(){
            window.location.href='../data/settingfile.html';
        });
        $('#datarecovery').click(function(){
            window.location.href='../data/datarecovery.html';
        });
        $('#settingguide').click(function(){
            window.location.href='/guide/guide';
        });
        $('#logout').click(function(){
            window.location.href='/auth/login';
        });

        $('#user-information').click(function () {
            $('#system-information').css('color','inherit');
            $('.system-info-line2').css('background','none');
            $(this).css('color','#2DA2EA');
            $('.system-info-line1').css('background','#2DA2EA');
            var t = $(window).scrollTop();
            $('body,html').animate({'scrollTop':t-850},100)
        });
        $('#system-information').click(function () {
            $('#user-information').css('color','inherit');
            $('.system-info-line1').css('background','none');
            $(this).css('color','#2DA2EA');
            $('.system-info-line2').css('background','#2DA2EA');
            var t = $(window).scrollTop();
            $('body,html').animate({'scrollTop':t+850},100)
        });
        $('.avail-wlan-button').click(function () {
			$('#loading-img').css('display','none');
        });
        var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
        };


        $().UItoTop({ easingType: 'easeOutQuart' });

    });
</script>




</body>
</html>